<html>
	<head>
		<title></title>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
		<script src="functions.js"></script>
		<script>
		if(window.location.hash == "") {
			console.log("Vista lista");
		} else {
			console.log("Vista detalle de " + window.location.hash);
		}
		</script>
		<script> 
		$(document).ready(function(){
		    $.getJSON("http://193.147.175.241:8080/restisa/tools",
		        function(data){
		       		$.each(data, function(i,tool){
						if(tool.state == "REGISTERED") {
							$("<li>" + tool.name + " || " + tool.description +  "</li>").appendTo("#tools_registered");
						} else {
							$("<li>" + tool.name + "</li>").appendTo("#tools_labs");
						}
						
						addToolToTable(tool);
					});			
		        });
		
			$("table").css({
				"margin-left" : "auto",
				"margin-right" : "auto"
			});	
			
			hello();
		  });
		
		function addToolToTable(tool) {
			var element = "<tr>";
			
			element += "<td>";
			
			var name = tool.name.replace(/\s/g, "-");
			element += "<a href='#" + name + "' onclick='details(" + tool.toolID + ")'>" + tool.name + "</a>";
			element += "<td>";
			
			element += "<td>";
			element += tool.description;
			element += "<td>";
			
			element += "</tr>";
			
			if(tool.state == "REGISTERED") {
				$(element).appendTo("#table_registered");
			} else {
				$(element).appendTo("#table_labs");
			}
			
		}
		
		function details(id) {
			console.log(id);
			$("#app").detach();
		}
		</script>
	</head>
	<body>
		<h1>HOLA</h1>
		<div id="app">
			<div>
				<ul id="tools_registered">
				</ul>
			</div>
			<div>
				<ul id="tools_labs">
				</ul>
			</div>
			<div id="div_tables">
				<table id="table_registered">
					<caption>Registered Tools</caption>
				</table>
				<table id="table_labs">
					<caption>Labs Tools</caption>
				</table>
			</div>
		</div>
	</body>
</html>